[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.4", "next-themes": "^0.4.6", "react": "19.1.0", "react-day-picker": "9.8.0", "react-dom": "19.1.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "gsap": "3.13.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: #ffffff; --foreground: #0a0a0a; --card: #ffffff; --card-foreground: #0a0a0a; --popover: #ffffff; --popover-foreground: #0a0a0a; --primary: #737373; --primary-foreground: #fafafa; --secondary: #f5f5f5; --secondary-foreground: #171717; --muted: #f5f5f5; --muted-foreground: #717171; --accent: #f5f5f5; --accent-foreground: #171717; --destructive: #e7000b; --destructive-foreground: #f5f5f5; --border: #e5e5e5; --input: #e5e5e5; --ring: #a1a1a1; --chart-1: #737373; --chart-2: #737373; --chart-3: #737373; --chart-4: #737373; --chart-5: #737373; --radius: 0rem; --sidebar: #fafafa; --sidebar-foreground: #0a0a0a; --sidebar-primary: #171717; --sidebar-primary-foreground: #fafafa; --sidebar-accent: #f5f5f5; --sidebar-accent-foreground: #171717; --sidebar-border: #e5e5e5; --sidebar-ring: #a1a1a1; --font-sans: 'Geist Mono', 'Geist Mono Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --font-serif: 'Geist Mono', 'Geist Mono Fallback'; --shadow-x: 0px; --shadow-y: 1px; --shadow-blur: 2px; --shadow-spread: 0px; --shadow-opacity: 0.05; --shadow-color: #000000; } .dark { --background: #0a0a0a; --foreground: #fafafa; --card: #191919; --card-foreground: #fafafa; --popover: #262626; --popover-foreground: #fafafa; --primary: #737373; --primary-foreground: #fafafa; --secondary: #262626; --secondary-foreground: #fafafa; --muted: #262626; --muted-foreground: #a1a1a1; --accent: #404040; --accent-foreground: #fafafa; --destructive: #ff6467; --destructive-foreground: #262626; --border: #383838; --input: #525252; --ring: #737373; --chart-1: #737373; --chart-2: #737373; --chart-3: #737373; --chart-4: #737373; --chart-5: #737373; --sidebar: #171717; --sidebar-foreground: #fafafa; --sidebar-primary: #fafafa; --sidebar-primary-foreground: #171717; --sidebar-accent: #262626; --sidebar-accent-foreground: #fafafa; --sidebar-border: #ffffff; --sidebar-ring: #525252; --shadow-x: 0px; --shadow-y: 1px; --shadow-blur: 2px; --shadow-spread: 0px; --shadow-opacity: 0.05; --shadow-color: #000000; } @theme inline { --font-sans: 'Geist Mono', 'Geist Mono Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --font-serif: 'Geist Mono', 'Geist Mono Fallback'; /* computed shadow variables below - do not modify */ --shadow-2xs: var(--shadow-x) var(--shadow-y) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-xs: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-sm: var(--shadow-x) var(--shadow-y) calc(var(--shadow-blur) * 1.5) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-md: calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(var(--shadow-blur) * 3) calc(var(--shadow-spread) - 1px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-lg: calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(var(--shadow-blur) * 5) calc(var(--shadow-spread) - 3px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-xl: calc(var(--shadow-x) * 6) calc(var(--shadow-y) * 6) calc(var(--shadow-blur) * 7) calc(var(--shadow-spread) - 5px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent); --shadow-2xl: calc(var(--shadow-x) * 8) calc(var(--shadow-y) * 8) calc(max(0px, var(--shadow-blur) * 9 - 8px)) calc(var(--shadow-spread) - 12px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 250%), transparent); --shadow: var(--shadow-md); --color-shadow-color: var(--shadow-color); --shadow-opacity: var(--shadow-opacity); --shadow-spread: var(--shadow-spread); --shadow-blur: var(--shadow-blur); --shadow-y: var(--shadow-y); --shadow-x: var(--shadow-x); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata } from 'next' import { GeistSans } from 'geist/font/sans' import { GeistMono } from 'geist/font/mono' import { Analytics } from '@vercel/analytics/next' import './globals.css' import { Geist_Mono as V0_Font_Geist_Mono } from 'next/font/google' // Initialize fonts const _geistMono = V0_Font_Geist_Mono({ subsets: ['latin'], weight: ["100","200","300","400","500","600","700","800","900"] }) export const metadata: Metadata = { title: 'v0 App', description: 'Created with v0', generator: 'v0.app', } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="lib/cart-context.tsx" isMerged="true" "use client" import { createContext, useContext, useState, type ReactNode } from "react" export interface CartItem { id: number name: string price: number quantity: number image: string } interface CartContextType { items: CartItem[] addItem: (item: Omit) => void removeItem: (id: number) => void updateQuantity: (id: number, quantity: number) => void isOpen: boolean toggleCart: () => void } const CartContext = createContext(undefined) export function CartProvider({ children }: { children: ReactNode }) { const [items, setItems] = useState([]) const [isOpen, setIsOpen] = useState(false) const addItem = (item: Omit) => { setItems((prev) => { const existing = prev.find((i) => i.id === item.id) if (existing) { return prev.map((i) => (i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i)) } return [...prev, { ...item, quantity: 1 }] }) } const removeItem = (id: number) => { setItems((prev) => prev.filter((item) => item.id !== id)) } const updateQuantity = (id: number, quantity: number) => { if (quantity <= 0) { removeItem(id) return } setItems((prev) => prev.map((item) => (item.id === id ? { ...item, quantity } : item))) } const toggleCart = () => setIsOpen((prev) => !prev) return ( {children} ) } export function useCart() { const context = useContext(CartContext) if (!context) { throw new Error("useCart must be used within CartProvider") } return context } [V0_FILE]typescriptreact:file="components/add-to-cart-button.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { ShoppingCart, Check } from "lucide-react" import { Button } from "@/components/ui/button" import gsap from "gsap" import { useCart } from "@/lib/cart-context" interface AddToCartButtonProps { product: { id: number name: string price: number image: string } } export function AddToCartButton({ product }: AddToCartButtonProps) { const [isAdded, setIsAdded] = useState(false) const buttonRef = useRef(null) const iconRef = useRef(null) const textRef = useRef(null) const { addItem } = useCart() useEffect(() => { const button = buttonRef.current if (!button) return const handleMouseEnter = () => { gsap.to(button, { scale: 1.05, duration: 0.3, ease: "power2.out", }) } const handleMouseLeave = () => { gsap.to(button, { scale: 1, duration: 0.3, ease: "power2.out", }) } button.addEventListener("mouseenter", handleMouseEnter) button.addEventListener("mouseleave", handleMouseLeave) return () => { button.removeEventListener("mouseenter", handleMouseEnter) button.removeEventListener("mouseleave", handleMouseLeave) } }, []) const handleClick = () => { if (isAdded) return addItem(product) const tl = gsap.timeline() tl.to(buttonRef.current, { scale: 0.9, duration: 0.1, ease: "power2.in", }) .to(buttonRef.current, { scale: 1.1, duration: 0.2, ease: "power2.out", }) .to(buttonRef.current, { scale: 1, duration: 0.2, ease: "power2.out", }) gsap.to(iconRef.current, { y: -20, opacity: 0, duration: 0.2, ease: "power2.in", onComplete: () => { setIsAdded(true) gsap.fromTo(iconRef.current, { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.3, ease: "power2.out" }) }, }) gsap.to(textRef.current, { opacity: 0, duration: 0.15, onComplete: () => { gsap.to(textRef.current, { opacity: 1, duration: 0.15, }) }, }) setTimeout(() => { gsap.to(iconRef.current, { y: -20, opacity: 0, duration: 0.2, ease: "power2.in", onComplete: () => { setIsAdded(false) gsap.fromTo(iconRef.current, { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.3, ease: "power2.out" }) }, }) }, 2000) } return ( ) } [V0_FILE]typescriptreact:file="components/cart-button.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import { ShoppingCart } from "lucide-react" import { Button } from "@/components/ui/button" import gsap from "gsap" import { useCart } from "@/lib/cart-context" export function CartButton() { const { items, toggleCart, isOpen } = useCart() const buttonRef = useRef(null) const badgeRef = useRef(null) const itemCount = items.reduce((sum, item) => sum + item.quantity, 0) useEffect(() => { if (badgeRef.current && itemCount > 0) { gsap.fromTo(badgeRef.current, { scale: 0 }, { scale: 1, duration: 0.3, ease: "back.out(1.7)" }) } }, [itemCount]) const handleClick = () => { toggleCart() if (buttonRef.current) { gsap.to(buttonRef.current, { scale: 0.9, duration: 0.1, yoyo: true, repeat: 1, ease: "power2.inOut", }) } } return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { AddToCartButton } from "@/components/add-to-cart-button" import { CartView } from "@/components/cart-view" import { CartButton } from "@/components/cart-button" import { CartProvider, useCart } from "@/lib/cart-context" const products = [ { id: 1, name: "Wireless Headphones", price: 99.99, image: "https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&h=400&fit=crop", }, { id: 2, name: "Smart Watch", price: 249.99, image: "https://images.unsplash.com/photo-1579586337278-3befd40fd17a?w=400&h=400&fit=crop", }, { id: 3, name: "Laptop Stand", price: 49.99, image: "https://images.unsplash.com/photo-1625948515291-69613efd103f?w=400&h=400&fit=crop", }, ] function PageContent() { const { isOpen } = useCart() return (

{products.map((product) => (

{product.name}

${product.price.toFixed(2)}

))}

) } export default function Page() { return ( ) } [V0_FILE]typescriptreact:file="components/cart-view.tsx" isEdit="true" "use client" import { useEffect, useRef } from "react" import { Plus, Minus, ShoppingBag, Trash2 } from "lucide-react" import { Button } from "@/components/ui/button" import gsap from "gsap" import { useCart } from "@/lib/cart-context" export function CartView() { const cartRef = useRef(null) const itemsRef = useRef<(HTMLDivElement | null)[]>([]) const { items, removeItem, updateQuantity } = useCart() useEffect(() => { if (!cartRef.current) return gsap.fromTo(cartRef.current, { opacity: 0, x: 50 }, { opacity: 1, x: 0, duration: 0.6, ease: "power3.out" }) }, []) useEffect(() => { itemsRef.current.forEach((item, index) => { if (item) { gsap.fromTo( item, { opacity: 0, y: 20, scale: 0.95 }, { opacity: 1, y: 0, scale: 1, duration: 0.5, delay: index * 0.08, ease: "back.out(1.4)" }, ) } }) }, [items.length]) const handleRemove = (id: number, index: number) => { const item = itemsRef.current[index] if (!item) return gsap.to(item, { x: 150, opacity: 0, scale: 0.8, duration: 0.4, ease: "power3.in", onComplete: () => removeItem(id), }) } const handleQuantityChange = ( id: number, currentQuantity: number, direction: "up" | "down", element: HTMLElement, ) => { const newQuantity = direction === "up" ? currentQuantity + 1 : currentQuantity - 1 updateQuantity(id, newQuantity) gsap.to(element, { scale: 1.3, duration: 0.2, yoyo: true, repeat: 1, ease: "elastic.out(1, 0.5)", }) } const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0) return (

Shopping Cart

{items.length} {items.length === 1 ? "item" : "items"}

{items.length === 0 ? (

Your cart is empty

Add some products to get started

) : ( <>

{items.map((item, index) => (

{ itemsRef.current[index] = el }} className="group relative bg-zinc-900/50 backdrop-blur-sm rounded-2xl p-4 border border-zinc-800/50 hover:border-zinc-700 transition-all duration-300" >

{item.name}

${item.price.toFixed(2)}

{item.quantity}

${(item.price * item.quantity).toFixed(2)}

))}

Subtotal ${total.toFixed(2)}

Shipping Free

Total ${total.toFixed(2)}

)}

) }

About

Tags

Share

About

Tags

Share

More from biglongs1

More Templates Like This

About

Tags

Share

About

Tags

Share

More from biglongs1

More Templates Like This